<template>
    <div class="icons">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(page, index) of pages" :key="index">
                <div class="icon" v-for="item of page" :key="item.id">
                    <div class="icon-img">
                        <img :src="item.imgUrl" alt="icon" class="icon-img-content" />
                    </div>
                    <p class="icon-desc">{{ item.desc }}</p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script>
export default {
    name: 'HomeIcons',
    props: {
        iconList: Array,
    },
    data() {
        return {
            swiperOption: {
                autoplay: false, // 不要让轮播图滚动
            },
            // iconList: [{
            //     id: '0001',
            //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
            //     desc: '热门景点'
            // },{
            //     id: '0002',
            //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
            //     desc: '滑雪景点'
            // },{
            //     id: '0003',
            //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
            //     desc: '滑雪景点'
            // },{
            //     id: '0004',
            //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
            //     desc: '滑雪景点'
            // },{
            //     id: '0005',
            //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
            //     desc: '滑雪景点'
            // },{
            //     id: '0006',
            //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
            //     desc: '滑雪景点'
            // },{
            //     id: '0007',
            //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
            //     desc: '滑雪景点'
            // },{
            //     id: '0008',
            //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
            //     desc: '滑雪景点'
            // },{
            //     id: '0009',
            //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',
            //     desc: '滑雪景点'
            // }]
        };
    },
    // 根据数据项的不同(比如上面有9条数据，需要显示在2个页面)，自动地去构建页码
    computed: {
        pages() {
            const pages = [];
            this.iconList.forEach((item, index) => {
                const page = Math.floor(index / 8); // 向下取整
                if (!pages[page]) {
                    pages[page] = [];
                }
                pages[page].push(item);
            });
            return pages;
        },
    },
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
@import '~@/assets/styles/mixins.styl'
    .icons >>> .swiper-container
        height: 0
        padding-bottom: 50%
    .icon
        position relative;
        overflow hidden;
        float left;
        width 25%;
        height 0;
        padding-bottom 25%;
        .icon-img
            position absolute;
            left 0;
            top 0;
            right 0;
            bottom .44rem;
            box-sizing: border-box;
            padding: .1rem;
            .icon-img-content
                display block;
                margin 0 auto;
                height 100%;
        .icon-desc
            position absolute;
            left 0;
            right 0;
            bottom 0;
            height .44rem;
            line-height .44rem;
            text-align center;
            color $darkTextColor;
            ellipsis()/* 超过框的字体变为... */
</style>
